<template>
  <div class="wrapper">
    <div class="code-container">
      <!--
        在code变化的时候, 触发编译 -> (编译原理) ->
        动态识别标识符, 生成富文本, 改变内容样式, 识别错误
      -->
      <textarea v-model="code"/>
    </div>
    <button @click.prevent="submit">run</button>
    <div class="code-res">
      <!--      <div v-if="window.res">{{ window.res }}</div>-->
      <div id="res"></div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      code: '输入代码',
      // res: ""
    }
  },
  mounted() {
    let lastLog;
    // window.res = ''
    console.oldLog = console.log;
    // 替换log
    console.log = function (str) {
      console.oldLog(str);
      lastLog = str;
      // window.res += lastLog
      // window.res += '\n'
      document.querySelector('#res').innerText += '\n'
      document.querySelector('#res').innerText += lastLog
    }
  },
  methods: {
    submit() {
      document.querySelector('#res').innerText = ''
      let call = new Function(this.code)
      try {
        call()
      } catch (e) {
        document.querySelector('#res').innerText = ''
        console.log(e)
      }
      /*
        let add = (a,b) => a+b
        let c =add(1,3)
        console.log(c)

        let sub = (a,b) => a-b
        let d =sub(5,2)
        console.log(d)

        let mul= (a,b) => a*b
        let e =mul(5,2)
        console.log(e)
       */
    }
  }
}
</script>
<style lang="css">
.code-container {
  margin: 20px;
}

.code-res {
  margin: 20px;
}
</style>